<template>
  <div>
    <div class="puick-box">
      <ul class="con">
        <li class="user">
          <router-link to="/"><span></span></router-link>
          <div class="user-box">
            <div class="img">
              <img
                src="../../assets/images/componentsimg/avatar_none.jpg"
                alt=""
              />
            </div>
            <div class="text">
              你好！请 <router-link to="/login">登录</router-link> |
              <router-link to="/">注册</router-link>
            </div>
            <div class="wo"><span></span>我的订单</div>
            <i class="jt"></i>
          </div>
        </li>
        <li>
          <router-link to="/" class="gowu"
            ><span></span>
            <div>购物车</div>
            <span id="bg">0</span></router-link
          >
        </li>
        <li>
          <router-link to="/"><span></span></router-link>
          <div class="none-box">
            <router-link to="/">我的收藏</router-link><i></i>
          </div>
        </li>
        <li>
          <router-link to="/"><span></span></router-link>
          <div class="none-box">
            <router-link to="/">最近查看</router-link><i></i>
          </div>
        </li>
        <li>
          <router-link to="/"><span></span></router-link>
          <div class="none-box">
            <router-link to="/">400-889-8188</router-link><i></i>
          </div>
        </li>
        <li>
          <router-link to="/"><span></span></router-link>
          <div class="none-box">
            <router-link to="/">在线客服</router-link><i></i>
          </div>
        </li>
      </ul>
      <ul class="bom">
        <li>
          <router-link to="/"><span></span></router-link>
          <div class="none-ma">
            <div>
              <img
                src="../../assets/images/componentsimg/wxguanjia_qrcode.png"
                alt=""
              />
              <p>关注微信公众号</p>
            </div>
            <div>
              <img
                src="../../assets/images/componentsimg/app_download_qrcode.png"
                alt=""
              />
              <p>下载花礼APP</p>
            </div>
            <i></i>
          </div>
        </li>
        <li>
          <router-link to="/"><span></span></router-link>
          <div class="none-box">
            <router-link to="/">功能反馈</router-link><i></i>
          </div>
        </li>
        <li @click="backTop()">
          <a href="#"><span></span></a>
          <div class="none-box"><a href="#">返回顶部</a><i></i></div>
        </li>
      </ul>
    </div>
    <div class="zixun">
      <span class="msg"></span>
      <a href="#">咨询客服</a>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    //返回顶部
    backTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>

<style scoped lang='less'>
.puick-box {
  width: 34px;
  height: 100%;
  background: #595656;
  position: fixed;
  top: 0;
  right: 0;
  z-index:9999;
  .con {
    position: absolute;
    top: 20%;
    // right: 0;
    width: 100%;
    z-index: 100;
    li {
      list-style: none;
      margin: 10px 0;
      position: relative;
      &:nth-of-type(3) span {
        background-position: 0 -72px;
      }
      &:nth-of-type(4) span {
        background-position: 0 -110px;
      }
      &:nth-of-type(5) span {
        background-position: 0 -145px;
      }
      &:nth-of-type(6) span {
        background-position: 0 -182px;
      }
      .none-box {
        position: absolute;
        top: 0;
        left: -120px;
        border: 1px solid gainsboro;
        background: #fff;
        width: 120px;
        text-align: center;
        line-height: 32px;
        border-radius: 3px 0 0 3px;
        display: none;
        a {
          color: #555;
          font-size: 13px;
          &:hover {
            background: none;
          }
        }
        i {
          width: 0;
          height: 0;
          display: inline-block;
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;
          border-left: 9px solid #fff;
          position: absolute;
          top: 12px;
          right: -9px;
        }
      }
    }
    li:hover > div {
      display: block;
    }
    .user-box {
      position: absolute;
      top: 0;
      left: -288px;
      width: 288px;
      height: 200px;
      border: 1px solid gainsboro;
      background: #fff;
      text-align: center;
      font-size: 12px;
      border-radius: 5px 0 0 0;
      display: none;
      .img {
        padding: 20px 0;
        img {
          border-radius: 50%;
        }
      }
      .text {
        color: gray;
        a {
          display: inline-block;
          color: #ff6600;
          &:hover {
            background: none;
            text-decoration: underline;
          }
        }
      }
      .wo {
        background: #f8f8f8;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 40px;
        line-height: 40px;
        span {
          width: 25px;
          height: 25px;
          background-position: -40px -78px;
          vertical-align: middle;
          margin-right: 5px;
        }
      }
      .jt {
        width: 0;
        height: 0;
        display: inline-block;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 9px solid #fff;
        position: absolute;
        top: 12px;
        right: -9px;
      }
    }
    span {
      width: 100%;
      height: 30px;
      display: inline-block;
      background: url(../../assets/images/componentsimg/ibar_sprites.png)
        no-repeat;
    }
    a {
      height: 100%;
      display: block;
      color: #fff;
      font-size: 12px;
    }
    a:hover {
      background: #ff6600;
      text-decoration: none;
      color: #fff;
    }
    .gowu {
      // height: 133px;
      width: 100%;
      border-top: 1px solid gainsboro;
      border-bottom: 1px solid gainsboro;
      text-align: center;
      div {
        display: inline-block;
        writing-mode: vertical-lr;
      }
      span {
        background-position: 0 -35px;
      }
      #bg {
        width: 26px;
        height: 26px;
        background: #ff6600;
        border-radius: 50%;
        line-height: 26px;
        text-align: center;
        margin: 15px 0;
      }
      &:hover #bg {
        background: #fff;
        color: #ff6600;
      }
    }
  }
  .bom {
    position: absolute;
    bottom: 0;
    width: 100%;
    li {
      list-style: none;
      margin: 10px 0;
      position: relative;
      &:hover > div {
        display: block;
      }
      span {
        width: 100%;
        height: 30px;
        display: inline-block;
        background: url(../../assets/images/componentsimg/ibar_sprites.png)
          no-repeat;
      }
      a {
        height: 100%;
        display: block;
        color: #fff;
        font-size: 12px;
      }
      a:hover {
        background: #ff6600;
        text-decoration: none;
        color: #fff;
      }
      &:nth-of-type(1) span {
        background-position: -1px -218px;
      }
      &:nth-of-type(2) span {
        background-position: -1px -362px;
      }
      &:nth-of-type(3) span {
        background-position: -1px -255px;
      }
      .none-ma {
        position: absolute;
        width: 288px;
        height: 200px;
        bottom: 0;
        left: -288px;
        border: 1px solid gainsboro;
        background: #fff;
        padding-top: 30px;
        display: none;
        div {
          text-align: center;
          float: left;
          width: 50%;
          img {
            width: 110px;
          }
          p {
            margin: 10px 0;
            color: gray;
          }
        }
      }
      .none-box {
        position: absolute;
        width: 120px;
        height: 34px;
        bottom: 0;
        left: -120px;
        border: 1px solid gainsboro;
        background: #fff;
        text-align: center;
        line-height: 34px;
        display: none;
        a {
          color: #555;
          font-size: 13px;
          &:hover {
            background: none;
          }
        }
      }
      i {
        width: 0;
        height: 0;
        display: inline-block;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 9px solid #fff;
        position: absolute;
        bottom: 12px;
        right: -7px;
      }
    }
  }
}
.zixun {
  position: fixed;
  bottom: 0;
  right: 60px;
  width: 130px;
  height: 35px;
  line-height: 35px;
  background: #ff6600;
  z-index: 9999;
  a {
    padding-left: 50px;
    color: #fff;
    font-size: 16px;
  }
  .msg {
    display: inline-block;
    position: absolute;
    width: 35px;
    height: 35px;
    border-right: 1px solid rgba(204, 204, 204, 0.555);
    background: url(https://static.meiqia.com/widget/static/icon-mq-round@2x.png)
      2px 2px / 64px no-repeat;
  }
}
</style>